<template>
	<view class="signature">
		<view class="signature-tips">
			请签字确认
		</view>
		<view class="signature-box">
		    <l-signature disableScroll  ref="signatureRef" :penColor="penColor" :penSize="penSize" :openSmooth="openSmooth" landscape></l-signature>
		</view>
		<view class="signature-btn">
			<!-- <button @click="onClick('clear')">清空</button>
		    <button @click="onClick('undo')">撤消</button>
		    <button @click="onClick('save')">保存</button>
		    <button @click="onClick('openSmooth')">压感{{openSmooth?'开':'关'}}</button> 
			 -->
			<view class="btn" @click="onClick('clear')">重签</view>
			<view>
				<view class="btn2" @click="onClick('cancel')">取消</view>
				<view class="btn" @click="onClick('save')">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				title: 'Hello',
				penColor: 'black',
				penSize: 5,
				imageUrl: '',
				openSmooth: true
			}
		},
		emits: ['closeSign'],
		methods:{
			onClick(type) {
				 if(type == 'openSmooth') {
					 this.openSmooth = !this.openSmooth
					 return
				 }
				if (type == 'save') {
					this.$refs.signatureRef.canvasToTempFilePath({
						success: (res) => {
							// 是否为空画板 无签名
							console.log(res.isEmpty)
							if(res.isEmpty){
								uni.showToast({
									title: '请签名',
									icon:'none',
									duration: 1000
								})
								return;
							}
							// 生成图片的临时路径
							// H5 生成的是base64
							this.imageUrl = res.tempFilePath;
							console.log('imageUrl',this.imageUrl)
							this.$emit('closeSign', {
								type: 'save',
								url: res.tempFilePath
							})
						}
					})
					return
				}else if(type == 'cancel'){
					this.$emit('closeSign',{
						type:'close'
					})
				}else{
					if (this.$refs.signatureRef)
						this.$refs.signatureRef[type]()
				}
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.signature{
		position:fixed;
		top:0;
		width:100vw;
		height:100vh;
		padding:40rpx;
		background-color: #fff;
		z-index: 10000;
		&-tips{
			color: #000;
			transform: rotate(90deg) translateY(50%);
			position: absolute;
			top: 40%;
			right: 20rpx;
			z-index: 10000
		}
		&-box{
			width:100%;
			height:85%;
			border:2rpx #6c6c6c dashed;
			// background:black;
		}
		&-btn{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 40px 0;
			height: 100vw;
			transform: rotate(90deg);
		}
		.btn {
			background: linear-gradient(0deg, #EA5034, #dA5034);
			color: #FFFFFF;
			font-weight: bold;
			padding: 5px 0;
			border-radius: 40px;
			width: 100px;
			text-align: center;
		}
		.btn2 {
			color: #666666;
			font-weight: bold;
			padding: 5px 0;
			border: .5px #666666 solid;
			border-radius: 40px;
			width: 100px;
			text-align: center;
			margin-bottom: 20px;
		}
	}
</style>